<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.3.1-框架要做到良好的 Tree-Shaking</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 产物的用途以及在构建阶段如何输出这些产物
        */

        /**
         * IIFE 格式的资源
         * - 全称是 Immediately Invoked Function Expression
         * - 可以直接在 HTML 页面中使用 <script> 标签引入框架并使用
         * -- <script src="/path/to/vue.js"><\/script>
         * - 是一个立即执行的函数表达式
         * - vue.global.js 文件就是 IIFE 形式的资源
         * - 在 rollup.js 中，我们可以通过配置 format: 'iife' 来输出这种形式的资源
         * */
        var Vue = (function(exports){
            // ...
            exports.createApp = createApp;
            // ...
            return exports
        }({}))
        
        // rollup.config.js
        const config = {
            input: 'input.js',
            output: {
                file: 'output.js',
                format: 'iife' // 指定模块形式
            }
        }
        export default config


        /**
         * ESM 格式的资源
         * - rollup.js 的输出格式需要配置为：format: 'esm'
         * 
         * - Vue.js 3 会输出 vue.esm-browser.js 文件
         * -- 可以直接用<script type="module"> 标签引入
         * ---- <script type="module" src="/path/to/vue.esm-browser.js"><\/script>
         * 
         * - Vue.js 还会输出一个 vue.esm-bundler.js 文件
         * -- 无论是 rollup.js 还是webpack，在寻找资源时，如果 package.json 中存在 module 字段，
         *    那么会优先使用 module 字段指向的资源来代替 main 字段指向的资源
         * {
         *    "module": "dist/vue.esm-bundler.js",
         *    "main": "index.js"
         * }
         * 
         * 
         * - 带有 -bundler 字样的 ESM 资源是给 rollup.js 或 webpack 等打包工具使用的
         * - 带有 -browser 字样的 ESM 资源是直接给<script type="module"> 使用的
         * 
         * 
         * 它们之间有何区别
         * - 构建用于 <script> 标签的ESM 资源时，
         *   如果是用于开发环境，那么 __DEV__ 会设置为true；
         *   如果是用于生产环境，那么 __DEV__ 常量会设置为false，
         *   从而被 Tree-Shaking 移除
         * - 构建提供给打包工具的 ESM 格式的资源时
         *   要使用 (process.env.NODE_ENV !== 'production')替换 __DEV__ 常量
         *   用户可以通过 webpack 配置自行决定构建资源的目标环境
         * 
        */


        /**
         * cjs 模块的资源
         * - Node.js 环境中，资源的模块格式应该是CommonJS，简称 cjs
         * - 通过修改 rollup.config.js 的配置 format: 'cjs'
         * */ 
        // rollup.config.js
        const configCjs = {
            input: 'input.js',
            output: {
                file: 'output.js',
                format: 'cjs' // 指定模块形式
            }
        }

        // export default configCjs



    </script>
</html>